<template>
  <div class="home_page">
    <div class="home_top" :class="{ 'withe_show': flag }">
      <div class="logo" @click="$router.push('/')"></div>
      <div class="right-menu" v-if="isLogin">
        <div class="hover qiandao">
          <el-tooltip class="item" effect="dark" :content="`您有${messagePrompt || 0}条消息未读！`" placement="bottom">
            <el-badge :value="messagePrompt" class="item" @click.native="$skipRouter('individual', 'message')">
              <span class="message"></span>
            </el-badge>
          </el-tooltip>
          <!-- <i class="qiandao"></i>
          <span>签到</span> -->
        </div>
        <div class="hover" @click="$skipRouter('individual','taskManagement')">
          <div class="p">
            <i class="el-icon-coin"></i>
            <span>任务管理</span>
          </div>
        </div>
        <el-dropdown>
          <div class="author">
            <img
              :src="userPhoto || 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/avatar/default_avatar/default.png'">
          </div>
          <el-dropdown-menu slot="dropdown" class="dropdownMenu">
            <div class="author-info">
              <div class="author_info_item">
                <div class="p">
                  <span>{{ userName }}</span>
                  <span></span>
                  <span class="blue_text">等级</span>
                </div>
                <div class="p">云贝：
                  <span class="blue_text">15</span>
                </div>
              </div>
              <div class="author_info_item">
                <i class="el-icon-user"></i>
                <span @click="$skipRouter('individual', 'user')">个人中心</span>
              </div>
              <div class="author_info_item">
                <i class="el-icon-chat-dot-square"></i>
                <span @click="$skipRouter('individual', 'message')">消息中心</span>
              </div>
              <div class="author_info_item">
                <i class="video-icon"></i>
                <span>视频中心</span>
              </div>
              <div @click="logOut" class="author_info_item">
                <i class="quit-icon"></i>
                <span>退出登录</span>
              </div>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="loginOrRegister" v-else>
        <div class="login" @click="$router.push({ name: 'login' })">登录</div>
        <div class="register" @click="$router.push({
          name: 'login', params: { register: 'register' }
        })">注册</div>
      </div>
    </div>
    <div class="carousel">
      <template>
        <el-carousel indicator-position="outside" height="380px">
          <el-carousel-item v-for="item in picList" :key="item.id" style="cursor: pointer;" @click.native="$skipRouter(item.url,item.url)">
            <img :src="item.path" alt="#" width="100%" height="380px">
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
    <!-- 导航 -->
    <div class="tool_component">
      <div class="tool_component_analysis" @click="$skipRouter('analysis', 'analysis')">
        <div class="tool_component_pic"></div>
        <div class="tool_component_title">云分析</div>
        <div class="tool_component_experience">立即体验</div>
      </div>
      <div class="tool_component_cloudHui" @click="$skipRouter('chartOverview', 'chartOverview')">
        <div class="tool_component_pic pic"></div>
        <div class="tool_component_title">云图汇</div>
        <div class="tool_component_experience">立即体验</div>
      </div>
    </div>
    <div class="map_component_view">
    </div>
    <!-- 底部 -->
    <div class="bottom_view">
      <div class="bottom_view_logo"></div>
      <div class="bottom_view_address">
        <div class="corporation">
          武汉百奥维凡生物科技有限公司
        </div>
        <div>
          地址：武汉市洪山区花城大道9号软件新城D2
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { logoutRequest } from '@/api/login'
import { getToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router';
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  name: 'BaiaoweifanUiIndex',

  data() {
    return {
      flag: false,
      isLogin: getToken(),
      userInfo: this.$store.state.login.userInfo,
      messagePrompt: null,
      userPhoto: null,
      userName: null,
      //各项工具使用情况图表
      chart1: null,
      picList:[
        {
          id:1,
          url:'analysis',
          path:'https://www.cloudtutu.com/img/img3.73129e04.png',
        },
        {
          id:2,
          url:'chartOverview',
          path:'https://www.cloudtutu.com/img/img1.4de9eff7.png',
        },
        {
          id:3,
          url:'',
          path:'https://www.cloudtutu.com/img/img2.f3cbaee0.png',
        }
        
        
      ]
    };
  },
  watch: {
    '$store.state.login.userInfo': {
      handler(Val, oldVal) {
        this.userLogin(Val)
        this.$forceUpdate();
      },
      deep: true,
    },
  },

  mounted() {
    // this.initChart1()
    if (this.isLogin) {
      this.userLogin(this.userInfo)
    }
    window.addEventListener('scroll', this.windowScroll) //监听页面滚动
  },
  destroyed() {
    window.removeEventListener("scroll", this.windowScroll);//销毁滚动事件
  },
  methods: {
    //监听浏览器滚动
    windowScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 0) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
    //获取用户详情
    userLogin(value) {
      const { email, weixin, userPhoto, userName } = value
      const i = parseInt(userName.length / 3)
      let left = userName.substring(0, i)
      let right = userName.substring(userName.length - i)
      this.userName = left + '***' + right
      this.userPhoto = userPhoto
      this.messagePrompt = Number(!email) + Number(!weixin)
    },
    //退出
    async logOut() {
      await logoutRequest()
      this.$store.commit('login/CHANGE_FLAG', false)
      removeToken()
      localStorage.clear()
      this.isLogin = false
      resetRouter()
      this.$message({
        message: '退出成功！',
        type: 'success'
      });
    },
    //初始化图表
    // initChart1() {
    //   let chartData = {
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'none'
    //       }
    //     },
    //     xAxis: [
    //       {
    //         type: 'category',
    //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    //         axisTick: {
    //           alignWithLabel: true
    //         }
    //       }

    //     ],
    //     yAxis: [
    //       {
    //         type: 'value'
    //       }
    //     ],
    //     series: [
    //       {
    //         name: '预算数据',
    //         type: 'bar',
    //         barWidth: '30%',
    //         itemStyle: {
    //           color: 'red',
    //         },
    //         data: [100, 520, 200, 350, 400, 370, 260]
    //       },
    //       {
    //         name: '实际数据',
    //         type: 'bar',
    //         barWidth: '60%',
    //         color: 'rgba(147, 186, 204 , 0.8)',
    //         barGap: '-100%',
    //         data: [10, 52, 200, 334, 390, 330, 220]
    //       }
    //     ]
    //   }
    //   let erd = elementResizeDetectorMaker();
    //   let that = this;
    //   erd.listenTo(document.getElementById("echartsList"), (element) => {
    //     that.$nextTick(() => {
    //       that.chart1.resize();
    //     });
    //   });
    //   this.chart1 = this.$echarts.init(document.getElementById('echarts'))
    //   this.setOptions(chartData)
    // },
    setOptions({ tooltip, title, legend, dataZoom, grid, xAxis, yAxis, series, toolbox } = {}) {
      this.chart1.setOption({
        tooltip, title, legend, dataZoom, grid, xAxis, yAxis, series, toolbox
      })
    },
    logsss() {
    }
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

// .el-carousel__item:nth-child(2n) {
//   background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n+1) {
//   background-color: #d3dce6;
// }

::v-deep .el-carousel__indicators--outside {
  display: none;
}

.home_page {
  width: 100%;
  height: 100%;

  .home_top {
    width: 100%;
    height: 60px;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .2);
    display: flex;
    justify-content: space-between;
    padding: 0 16% 0 12%;
    color: #fff;
    font-size: 18px;

    &.withe_show {
      background-color: $themeTopToolColor;
      color: #000;
      font-weight: 700;
    }

    .logo {
      cursor: pointer;
      width: 200px;
      background: url(../../assets/logo.png) no-repeat 50%;
      background-size: 100% 100%;
    }

    .loginOrRegister {
      width: 120px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .register,
      .login {
        cursor: pointer;
      }



    }
  }
}

.author-info {
  padding: 0 12px;

  .author_info_item {
    border-bottom: 1px solid #e0e0e0;
    padding: 18px 0;
    color: #7f7f7f;

    .p {
      margin: 0 0 15px 0;

      &:last-child {
        margin: 0;
      }

      .blue_text {
        color: #5fafff !important;
      }

      span {

        // color: red;
        &:nth-child(2) {
          background: url(../../assets/VIP.png) no-repeat;
          background-size: 20px;
          display: inline-block;
          width: 20px;
          height: 20px;
          vertical-align: bottom;
          margin-left: 5px;
        }
      }
    }

    &:last-child {
      border: 0;
    }

    &:nth-child(n+2) {
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 0;

      span {
        flex: 1;
        padding: 18px 0;

        &:hover {
          color: #5fafff;
        }
      }
    }

    i {
      margin: 0 10px 0 0;
    }
  }

  .video-icon,
  .quit-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url(../../assets/video.png) no-repeat;
    background-size: 18px;
    vertical-align: bottom;
  }

  .quit-icon {
    background: url(../../assets/quit.png) no-repeat;
    background-size: 18px;
  }
}

.right-menu {
  display: flex;
  align-items: center;

  ::v-deep .el-badge__content.is-fixed {
    position: absolute;
    top: 7px;
    right: 24px;
    -webkit-transform: translateY(-50%) translateX(100%);
    transform: translateY(-50%) translateX(100%);
  }

  .message {
    width: 30px;
    height: 30px;
    // background-color: red;
    background: url(../../assets/message.png) no-repeat;
    background-size: 30px;
    margin-right: 10px;
  }

  div {
    &:nth-child(1) {
      display: flex;
      align-items: center;

      .qiandao {
        display: block;
        width: 35px;
        height: 35px;
        background: url(../../assets//signIn.png) no-repeat;
        background-size: 35px;
      }
    }

    margin-right: 28px;

    .p {
      // width: 94px;
      height: 30px;
      line-height: 20px;
      text-align: center;
      border: 1px solid #fff;
      padding: 5px;
      border-radius: 3px;

      span {
        margin-left: 2px;
        height: 100%;
      }
    }
  }

  .author {
    width: 34px;
    height: 34px;
    border-radius: 50%;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .hover {
    cursor: pointer
  }
}

.tool_component {
  margin: 80px 0 0 0;
  height: 300px;
  display: flex;
  justify-content: center;

  // background-color: red;
  .tool_component_analysis,
  .tool_component_cloudHui {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    position: relative;
    cursor: pointer;
    width: 20%;
    height: 240px;
    margin: 0 2%;
    // background-color: red;
    border-radius: 15px;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .1);

    .tool_component_pic {
      position: absolute;
      top: -10%;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 100px;
      border-radius: 50px;
      background: url(../../assets/fenxi.png) no-repeat;
      background-size: 70%;
      background-position: center;
      background-color: #f0f0f0;
      &.pic {
        background: url(../../assets/huitu.png) no-repeat;
        background-size: 57%;
        background-position: center;
        background-color: #f0f0f0;
      }
    }

    .tool_component_title {
      font-size: 25px;
      font-weight: 700;
    }

    .tool_component_experience {
      margin-top: 20px;
      padding: 10px 20px;
      border: 1px solid #ccc;
      border-radius: 18px;
      color: $themeTopToolColor;
    }
  }
}
.bottom_view{
  height: 120px;
  background-color: #333333;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  .bottom_view_logo{
    width: 200px;
    height: 80px;
    // background-color: red;
    background: url(../../assets/logo.png) no-repeat;
    background-size: 100%;
    background-position: center;
  }
  .bottom_view_address{
    color: #fff;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   .corporation{
    margin-bottom: 5px;
   }
  }
}
.carousel{
  height: 380px;
}
.map_component_view{
  height: 120px;
  width: 100%;
}
::v-deep .el-carousel__arrow {
  background-color: rgba(0, 0, 0, .4);
}
</style>